<template>
    <div class="about">
         <!-- 查询区----start -->
        <el-form  :inline="true" ref="formSearch" :model="formSearch" class="demo-form-inline">
            <el-form-item label="优惠码">
                <el-input v-model="formSearch.couponCode" placeholder="请输入优惠码"></el-input>
            </el-form-item>
            <el-form-item label="获取方式">
                  <el-select v-model="formSearch.getType" placeholder="请选择">
                    <el-option label="全部" value="" ></el-option>
                    <el-option label="主动获取" value="1"></el-option>
                    <el-option label="后台赠送" value="0"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="获取日期">
                <el-date-picker
                   v-model="formSearch.createTime"
                   type="date"
                   placeholder="选择日期"
                   align="right"
                   :picker-options="pickerOptions"
                >
                </el-date-picker>
            </el-form-item>
             <el-form-item label="使用状态">
                <el-select v-model="formSearch.useStatus" placeholder="请选择">
                    <el-option label="全部" value="" ></el-option>
                    <el-option label="未使用" value=1></el-option>
                    <el-option label="已使用" value=0></el-option>
                    <el-option label="已过期" value=2></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="使用时间">
                <el-date-picker
                   v-model="formSearch.useTime"
                   type="date"
                   placeholder="选择上线日期时间"
                   align="right"
                   :picker-options="pickerOptions"
                >
                </el-date-picker>
            </el-form-item>
            <el-form-item label="操作" style="margin-left:50px;">
                <el-button type="primary"  icon="el-icon-search" @click="loadData()">查询</el-button>
                <el-button type="warning" icon="el-icon-refresh-right plain" @click="formSearch={},loadData()">重置</el-button>
            </el-form-item>
        </el-form>
        <!-- 查询区----end -->
        <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
            prop="couponName"
            label="优惠券名称"
            width="180">
        </el-table-column>
    <el-table-column
        prop="memberName"
        label="用户名称">
    </el-table-column>
    <el-table-column
        prop="couponCode"
        label="优惠码">
    </el-table-column>
    <el-table-column
        prop="getType"
        label="获取方式">
        <template slot-scope="scope">
            {{scope.row.getType==0?"后台增送":"主动获取"}}
        </template>
    </el-table-column>
    <el-table-column
        prop="createTime"
        label="获取时间">
        <template slot-scope="scope">
            {{scope.row.createTime | dateFilter("yyyy-mm-dd hh:mm:ss")}}
        </template>   
    </el-table-column>
    <el-table-column
        prop="useStatus"
        label="使用状态">
        <template slot-scope="scope">
            {{scope.row.useStatus==0?"已使用":scope.row.useStatus==1?"未使用":"已过期"}}
        </template>
    </el-table-column>
    <el-table-column
        prop="useTime"
        label="使用时间">
        <template slot-scope="scope">
            {{scope.row.useTime|dateFilter("yyyy-mm-dd hh:mm:ss")}}
        </template>   
    </el-table-column>
    <el-table-column
        prop="orderId"
        label="订单id">
    </el-table-column>
    <el-table-column
        prop="orderSn"
        label="订单编号">
    </el-table-column>
    </el-table>
    <!-- 页码组件开始 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[2,3,5,10,100, 200, 300, 400]"
      :page-size="pageSize"
      layout="total,sizes,prev,pager,next,jumper"
      :total="total">
    </el-pagination>
    <!-- 页码组件end -->
    </div>
</template>
 <script>
    export default {
      data() {
        return {
          tableData: [],
          currentPage:1,//当前页面，默认1
          pageSize:5,//每页显示条数
          total:100,
          formSearch: {},
                pickerOptions: {
                shortcuts: [{
                  text: '今天',
                  onClick(picker) {
                    picker.$emit('pick', new Date());
                  }
                }, {
                  text: '昨天',
                  onClick(picker) {
                    const date = new Date();
                    date.setTime(date.getTime() - 3600 * 1000 * 24);
                   picker.$emit('pick', date);
                  }
                }, {
                  text: '一周前',
                  onClick(picker) {
                    const date = new Date();
                    date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                    picker.$emit('pick', date);
                  }
               }]
            }
        }
      },created:function(){
        this.loadData();
            },
    methods: {
        loadData(){
          this.$http.post("/api/mks/couponHistory/queryAll?pageNo="+this.currentPage+"&pageSize="+this.pageSize,
          {couponCode:this.formSearch.couponCode,getType:this.formSearch.getType,
          createTime:this.formSearch.createTime,useStatus:this.formSearch.useStatus,
          useTime:this.formSearch.useTime}).then((response) => {
             if(response.data.code==2000){
               console.log(response.data)
                this.tableData = response.data.data.list;
                this.total = response.data.data.total;
              } 
        })        
    }, handleSizeChange(val) {
                    // console.log(`每页 ${val} 条`);
                    this.pageSize=val;
                    this.loadData();
       },
     handleCurrentChange(val) {
              // console.log(`当前页: ${val}`);
              this.currentPage=val;
              this.loadData();
      }
  },filters: {
        //时间格式处理
        dateFilter: function (data, format = "") {
            if(data==null||data==''){
                return ''
            }
            var dt = new Date(data);
            var y = dt.getFullYear();
            var m = (dt.getMonth()+1).toString().padStart(2,"0");
            var d = dt.getDate().toString().padStart(2,"0");
            var h = dt.getHours().toString().padStart(2,"0");
            var mm = dt.getMinutes().toString().padStart(2,"0");
            var s = dt.getSeconds().toString().padStart(2,"0");
            if (format.toLocaleLowerCase() === "yyyy-mm-dd" ||
                format.toLocaleLowerCase() === "") {
                return `${y}-${m}-${d}`;
            } else if (format.toLocaleLowerCase() === "yyyy/mm/dd") {
                return `${y}/${m}/${d}`;
            } else if (format.toLocaleLowerCase() === "yyyy-mm-dd hh:mm:ss") {
                return `${y}-${m}-${d} ${h}:${mm}:${s}`;
            } else if (format.toLocaleLowerCase() === "yyyy/mm/dd hh:mm:ss") {
                return `${y}/${m}/${d} ${h}:${mm}:${s}`;
            }
             else {
                return `输入的时间格式有误`;
            }
        }
  }
}
 </script>       